<template>
  <div class="md-editor-wrapper">
    <MdEditor
      :modelValue="modelValue"
      @update:modelValue="updateValue"
      preview-theme="vuepress"
      :toolbars="toolbars"
      style="height: 500px"
    />
  </div>
</template>

<script setup>
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])

const updateValue = (val) => {
  emit('update:modelValue', val)
}

// 自定义工具栏
const toolbars = [
  'bold',
  'italic',
  'strikethrough',
  'title',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'revoke',
  'next',
  'save',
  'prettier',
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
]
</script>

<style scoped>
.md-editor-wrapper {
  width: 100%;
  margin-bottom: 20px;
}

:deep(.md-editor) {
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}
</style> 